<template>
  <div class="search">
    <van-search
      v-model="search_key"
      shape="round"
      placeholder="请输入搜索关键词"
    />
  </div>
  <div class="body">
    <van-tabbar route @change="change">
      <van-tabbar-item to="/user/home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/user/news" icon="new-o">新闻</van-tabbar-item>
      <!-- <van-tabbar-item to="/user/eye" icon="eye-o">生活</van-tabbar-item> -->
      <van-tabbar-item to="/user/me" icon="manager-o">我的</van-tabbar-item>
    </van-tabbar>
    <router-view />
  </div>
</template>

<script lang="ts">
import { reactive, toRefs, watch, computed, defineComponent } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  name: "Home",
  components: {},
  setup() {
    const store = useStore();
    let data = reactive({
      search_key: "",
    });
    const change = () => {
      data.search_key = "";
    };
    watch(
      () => data.search_key,
      (newValue, oldVlaue) => {
        store.dispatch("Search/setSearchKey", newValue);
      }
    );
    return {
      ...toRefs(data),
      change,
    };
  },
});
</script>

<style lang="less">
.search {
  position: fixed;
  z-index: 999;
  top: 0;
  height: 30px;
  width: 100%;
}
.body {
  margin-top: 50px;
}
</style>
